import React, { useEffect, useState } from 'react';
import { Form, Descriptions, Button, Timeline } from 'antd';
import ModalDisposal from './modalDisposal';
import API from '@/api/xjindex';
import moment from 'moment';

const setDispose = ({ history }) => {
  const [form] = Form.useForm();
  const [initList, setInitList] = useState({});
  const [visible, setVisible] = useState(false);
  const [alarmTitle, setAlarmTitle] = useState('');
  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const [descriptData] = useState([
    {
      label: '告警等级',
      name: 'alarmLevel',
    },
    {
      label: '检测时长',
      name: 'detectionDuration',
    },
    {
      label: '攻击者组',
      name: 'sourceAddress',
    },
    {
      label: '受害者组',
      name: 'destinationAddress',
    },
    {
      label: '确认状态',
      name: 'readState',
    },
    {
      label: '处置状态',
      name: 'disposeState',
    },
  ]);

  const [descriptTableData] = useState([
    {
      label: '告警id',
      name: 'alarmId',
    },
    {
      label: '告警名称',
      name: 'alarmTitle',
    },
    {
      label: '告警内容',
      name: 'alarmContent',
    },
    {
      label: '告警等级',
      name: 'alarmLevel',
    },
    {
      label: '告警类型',
      name: 'alarmType',
    },
    {
      label: '告警次数',
      name: 'alarmNum',
    },
    {
      label: '域名',
      name: 'areaName',
    },
    {
      label: '攻击方向',
      name: 'directionDirection',
    },
    {
      label: '攻击者组',
      name: 'sourceAddress',
    },
    {
      label: '受害者组',
      name: 'destinationAddress',
    },
    {
      label: '告警处置建议',
      name: 'alarmDispose',
    },
  ]);

  const editFn = () => {
    setVisible(true);
    // setId(id);
  };

  const cancelFn = () => {
    setVisible(false);
  };

  const stateMap = {
    0: {
      text: '提醒',
    },
    1: {
      text: '警告',
    },
    2: {
      text: '严重',
    },
    3: {
      text: '等级',
    },
  };

  const init = () => {
    //id, 已读未读
    API.showAlarm(history.location.query).then((res) => {
      if (res) {
        setInitList({
          ...res.t,
          readState: res.t.readState === 0 ? '未读' : '已读',
          disposeState: '未处置',
          alarmLevel: stateMap[res.t.alarmLevel].text,
          createTime: moment(res.t.createTime).format('YYYY-MM-DD'),
        });
        setAlarmTitle('检测到代码执行攻击:' + res.t.alarmTitle);
      }
    });
  };
  useEffect(() => {
    init();
  }, []);

  return (
    <div>
      <div className="wrap_descript">
        <div className="descript_div">
          <span>{initList.threatScore}</span>
          <span>分</span>
        </div>
        <div className="descript_main">
          <Descriptions title={alarmTitle}>
            {descriptData.map((item) => {
              //获取数据的
              return (
                <Descriptions.Item label={item.label} key={item.name}>
                  {initList[item.name] || '-'}
                </Descriptions.Item>
              );
            })}
          </Descriptions>
        </div>
      </div>
      <div className="warp_steptable">
        <div className="warp_step">
          <div className="first_time">
            <div className="time_content">
              <div>告警时间</div>
              <span>{initList.createTime}</span>
            </div>
            <div className="timeline_marker"></div>
          </div>
        </div>
        <div className="wrap_table">
          <Descriptions
            title={alarmTitle}
            bordered
            column={{
              xxl: 2,
              xl: 2,
              lg: 2,
              md: 2,
              sm: 2,
              xs: 1,
            }}
            extra={
              <Button type="primary" onClick={editFn}>
                处置
              </Button>
            }
          >
            {descriptTableData.map((item) => {
              //获取数据的
              return (
                <Descriptions.Item label={item.label} key={item.name}>
                  {initList[item.name] || '-'}
                </Descriptions.Item>
              );
            })}
          </Descriptions>
        </div>
      </div>
      <ModalDisposal
        visible={visible}
        onCancel={cancelFn}
        initList={initList}
        state={history.location.query}
      ></ModalDisposal>
    </div>
  );
};

export default setDispose;
